import DiyScroll from '@/components/DiyScroll';
import { join } from '@/utils';
import { CaretRightOutlined, CloseOutlined, DeleteOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { Typography } from 'antd';
import classNames from 'classnames';
import dayjs from 'dayjs';
import React, { forwardRef, useImperativeHandle, useState } from 'react';
import styles from './index.less';

interface MusicT {
  initData: {
    playList: MUSIC.PlayListType[];
    lyricList: MUSIC.LyricListT[];
  };
  changeCurrentSongAction: any;
}

interface PropsType {
  refInstance: any;
}

const { Paragraph } = Typography;
const Index: React.FC<PropsType> = (props) => {
  const { refInstance } = props;
  const [activeIndex, setActiveIndex] = useState(0);
  const [isShow, setIsShow] = useState(false);
  const {
    initData: { playList, lyricList },
    changeCurrentSongAction,
  }: MusicT = useModel('music');

  useImperativeHandle(refInstance, () => ({
    setIsShow,
  }));

  return (
    <div className={styles.musicListWrapper} style={{ display: isShow ? 'block' : 'none' }}>
      <div className={styles.listhd}>
        <div className={styles.listhdl}>
          <h4 className={styles.count}>
            播放列表(<span className={styles.jFlag}>{playList.length}</span>)
          </h4>
          <div className={styles.delete}>
            <DeleteOutlined />
            <span>清除</span>
          </div>
        </div>
        <div className={styles.listhdr}>
          <p className={styles.title}>没有理想的人不伤心</p>
          <a className={styles.close}>
            <CloseOutlined onClick={() => setIsShow(false)} />
          </a>
        </div>
      </div>
      <div className={styles.listbd}>
        <div className={styles.left}>
          <DiyScroll>
            {playList.map((item) => {
              return (
                <div
                  key={item.id}
                  className={classNames(
                    styles.listItem,
                    activeIndex === item.id ? styles.listItemHover : null,
                  )}
                  onClick={() => setActiveIndex(item.id || 0)}
                >
                  <div className={styles.listItemLeft}>
                    {activeIndex === item.id ? (
                      <CaretRightOutlined
                        onClick={() => changeCurrentSongAction(item)}
                        style={{ color: 'red', fontSize: '18px' }}
                      />
                    ) : null}
                    <Paragraph ellipsis={{ rows: 1 }} className={styles.musicTitle}>
                      {item.name}
                    </Paragraph>
                  </div>
                  <div className={styles.listItemRight}>
                    <Paragraph ellipsis={{ rows: 1 }} className={styles.musicAuthor}>
                      {join(item.ar, 'name', '/')}
                    </Paragraph>
                    <div className={styles.musicTime}>{dayjs(item.dt).format('mm:ss')}</div>
                  </div>
                </div>
              );
            })}
          </DiyScroll>
        </div>
        <div className={styles.right}>
          <DiyScroll>
            <div className={styles.lyricList}>
              {lyricList.map((item) => {
                return (
                  <Paragraph ellipsis={{ rows: 1 }} className={styles.lyricItem} key={item.time}>
                    {item.content}
                  </Paragraph>
                );
              })}
            </div>
          </DiyScroll>
        </div>
      </div>
    </div>
  );
};
export default forwardRef((props: any, ref) => <Index {...props} refInstance={ref} />);
